<template>
  <view class="picker-input">
    <picker mode="selector" :range="dateRangeOptions" @change="onPickerChange">
      <view class="left">
        <text class="iconfont icon-shijian1"></text>
        <text class="">{{ selectedText }}</text>
        <text class="iconfont icon-jiantou_liebiaozhankai_o"></text>
      </view>
    </picker>
    <view class="right iconfont icon-RectangleCopy38"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue'
import { getStartDateAndEndStr } from '@/utils/http'

// 定义组件事件
const emit = defineEmits(['change'])
// 定义 porps
// 修正前：
const props = defineProps<{
  dateRangeOptionVal: string
}>()

const dateRangeOptions = ref(['最近10天', '最近30天', '最近60天', '最近90天', '本月', '上月'])

const selectedText = ref(props.dateRangeOptionVal)
// 处理选择变化
const onPickerChange = (e: any) => {
  const index = e.detail.value
  const option = dateRangeOptions.value[index]
  selectedText.value = option
  // 向父组件发送选择结果
  emit('change', {
    text: option,
    ...getStartDateAndEndStr(option),
  })
}
</script>

<style lang="scss">
.picker-input {
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
  background-color: #fff;
  font-size: 28rpx;
  color: #4b5563;
  .left {
    display: flex;
    align-items: center;

    .icon-shijian1 {
      font-size: 30rpx;
    }

    .icon-jiantou_liebiaozhankai_o {
      font-size: 40rpx;
    }

    // 文字部分
    > text:nth-child(2) {
      padding-left: 10rpx;
    }
  }

  // 右侧图标
  .right {
    // color: #666;

    // &.con-RectangleCopy38 {
    //   // 如果该类有特殊样式，可以在这里定义
    //   margin-left: 4px;
    // }
  }
}
</style>
